<template>

  <div :style="homeStyle">

      <div style="font-weight: bold;">{{forObject.title}}</div>
      <div :style="infoStyle">
        <p style="display: inline-block;color: #CA0C16;background-color: #f0f9eb">{{forObject.type}}</p>
        <p style="display: inline-block;color: #858585;margin-left: 3px">作者{{forObject.authorName}}</p>
        <p style="display: inline-block;color: #858585;margin-left: 3px">发布于{{dateFormat(forObject.releaseTime)}}</p>
        <p class="el-icon-thumb" style="display: inline-block;color: #858585;margin-left: 3px">&nbsp;点赞数{{forObject.praiseQuantity}}</p>
        <p class="el-icon-reading" style="display: inline-block;color: #858585;">&nbsp;浏览数{{forObject.browseQuantity}}</p>
      </div>

      <div style="word-break:break-all;word-wrap:break-word;" v-html="forObject.content"></div>
      <div style="margin-top: 50px">

          <el-button class="el-icon-thumb" @click="_praiseNot(forObject)" v-if="forObject.praise===1" type="text" style="text-decoration: none">已赞{{forObject.praiseQuantity}}</el-button>
          <el-button class="el-icon-thumb" @click="_praise(forObject)" v-else type="text" style="text-decoration: none">点赞{{forObject.praiseQuantity}}</el-button>

          <el-button class="el-icon-s-comment" @click="setComment" type="text">评论</el-button>

          <el-button v-if="forObject.collect===1" type="text" class="el-icon-star-off" @click="_unCollect(forObject)">已收藏</el-button>
          <el-button v-else type="text" class="el-icon-star-off" @click="_collect(forObject)">收藏</el-button>
<!--          <el-button >分享</el-button>-->
      </div>

      <div style="margin-top: 15px;margin-bottom: 20px">

          <el-input
                  id="writeCommentButton"
                  @focus="onInputTrue"
                  @blur="onInputFalse"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="comment">
          </el-input>
          <el-button   v-if="writeComment" style="float: right;" @click="releaseComment">发表评论</el-button>
      </div>

      <div style="margin-top: 30px">
          <table style="width:100%;list-style: none;border:none;margin-top: 20px;" v-for="(item , index) in blogCommentList">
              <tr style="float: left;font-size: 20px;">

                  <td>{{item.commentator}}<span style="border-radius: 10px">&nbsp;:</span></td>
                  <td>{{item.comment}}</td>
              </tr>

          </table>
      </div>
  </div>
    <ToLogin ref="toLoginRef" @loginBack="loginBack"></ToLogin>

</template>

<script>
    import ToLogin from '../../views/ToLogin'
    import {getCookie, getReq, postReq} from "../../utils/api";

  export default {

    mounted(){
       this.id =this.$route.query.id
       this._getBlogDetail(this.id)
        if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {

        }else{
            this.homeStyle='margin: 0 auto;width: 60%;text-align: left'
            this.infoStyle='font-size: 15px'
        }
    },
    components:{
        ToLogin
    },
    name: "Home",
    data(){
      return {
          homeStyle:'margin: 0 auto;width: 90%;text-align: left',
          infoStyle:'font-size: 10px',
        forObject:{
          id:'',
          title:'',
            releaseTime:undefined,
            authorName:undefined,
          content:''
        },
          blogCommentList:[],
          writeComment:false,
          comment:'',
          id:''
      }
    },
    methods:{
      handleClick(data){
        console.log(data);
      },
        onInputTrue(){
          this.writeComment=true
        },
        onInputFalse(){
          if (''===this.comment){
              this.writeComment=false
          }
        },
        setComment(){
          let auth= getCookie('Authorization')
          if (undefined===auth||''===auth){
            this.$refs.toLoginRef._open()
            return false
          }

            let ctrl=document.getElementById("writeCommentButton");
            ctrl.focus();
        },
        releaseComment(){
          postReq('/api/blog_comment/add',{comment:this.comment,blogId:this.forObject.id}).then(res=>{
               this._page()
              this.comment=''
              this.writeComment=false
          }).catch(err=>{
              console.log(err)
          });
        },
      _getBlogDetail(id){
          getReq('/api/blog/'+id).then(res=>{
              let data= res.data.data;
              this.forObject = data;

              console.log(this.forObject)
              this._page()
          }).catch(err=>{
              console.log(err)
          });
      },

        _page(){
            postReq('/api/blog_comment/list',{blogId:this.forObject.id}).then(res=>{
                console.log('---res---',res)
                console.log('---res.data---',res.data)
                this.blogCommentList=res.data.data;
            })
        },

        _praise(item){
            let auth= getCookie('Authorization')
            if (undefined===auth||''===auth){
                this.$refs.toLoginRef._open()
                return false
            }
            item.praiseQuantity=item.praiseQuantity+1;
            item.praise=1
            postReq('/api/blog_praise/praise?blogId='+item.id).then(res=>{
                if (res.data==='未登录'){
                    this.$refs.toLoginRef._open()
                }
            }).catch(err=>{
                console.log(err)
            });
        },
        _praiseNot(item){
            let auth= getCookie('Authorization')
            if (undefined===auth||''===auth){
                this.$refs.toLoginRef._open()
                return false
            }
            item.praiseQuantity=item.praiseQuantity-1;
            item.praise=0
            postReq('/api/blog_praise/praise_not?blogId='+item.id).then(res=>{
                let data= res.data.data;
                if (res.data==='未登录'){
                    this.$refs.toLoginRef._open()
                }
            }).catch(err=>{
                console.log(err)
            });
        },

        _collect(item){
            let auth= getCookie('Authorization')
            if (undefined===auth||''===auth){
                this.$refs.toLoginRef._open()
                return false
            }
            item.collect=1
            postReq('/api/blog_collect/collect?blogId='+item.id).then(res=>{
                if (res.data==='未登录'){
                    this.$refs.toLoginRef._open()
                }
            }).catch(err=>{
                console.log(err)
            });
        },
        _unCollect(item){
            let auth= getCookie('Authorization')
            if (undefined===auth||''===auth){
                this.$refs.toLoginRef._open()
                return false
            }
            item.collect=0
            postReq('/api/blog_collect/un_collect?blogId='+item.id).then(res=>{
                let data= res.data.data;
                if (res.data==='未登录'){
                    this.$refs.toLoginRef._open()
                }
            }).catch(err=>{
                console.log(err)
            });
        },

        //时间格式转换
        dateFormat: function (time) {
           if (undefined ===time||''===time){
               return time
           }
            let date = new Date(time);
            let year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             * */
            let month =
                date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        },







    },
  }
</script>

<style scoped>

</style>
